<template>
	<view class="billBox">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<u-tabs
			:list="list2"
			:lineColor="`#ff3411`"
			lineWidth="80"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 64px;width:180rpx"
			:current="currentIndex"
			@click="click"
			@change="change(index)"
		></u-tabs>
		<view class="billList" v-show="tabschange">
			<image src="../static/img/empty-box.png" mode=""></image>
			<view class="billText">暂无账单的记录哦~</view>
		</view>
		<view
			class="record"
			v-for="(item, index) in billData"
			:key="index"
			v-show="billText"
		>
			<view class="">
				<text>{{ item.date }}</text>
				<view class="bill">
					<view class="Billtitle">
						{{ item.list[index].title }}
						<view class="billTime">
							{{ item.list[index].add_time }}
						</view>
					</view>

					<view class="billNumber">
						-{{ item.list[index].number }}
					</view>
				</view>
			</view>
			<view class="more">加载更多</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {billList} from "./../../../network/user.js";
export default {
	onLoad(options) {
		console.log(options);
		this.currentIndex = options.index;
		console.log(this.currentIndex);
		// if(options.index == 1){
		// }
	},
	components: {
		Nav
	},
	data() {
		return {
			currentIndex: "",
			billText: true,
			tabschange: false,
			list2: [
				{
					name: "全部"
				},
				{
					name: "消费"
				},
				{
					name: "充值"
				}
			],
			current: "",
			billData: []
		};
	},
	methods: {
		change(index) {
			console.log(index);
			index = this.currentIndex;
		},
		click(index) {
			console.log(index);
			if (index.index == 2) {
				this.tabschange = true;
				this.billText = false;
			} else {
				this.tabschange = false;
				this.billText = true;
			}
		},
		async getBill() {
			let {data} = await billList();

			this.billData = data.list;
			console.log(this.billData);
		}
	},
	created() {
		this.getBill();
	}
};
</script>
<style lang="scss">
.more {
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 30rpx;
}
.record {
	background-color: #e3e3e3;
	height: 100vh;
	text {
		display: block;
		margin: 15rpx 0 15rpx 20rpx;
		font-size: 30rpx;
		color: #989898;
	}
}
.bill {
	// border: 1px solid black;
	// margin-left: 20rpx;
	width: 90%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	border-radius: 15rpx;
	background-color: white;

	.Billtitle {
		margin: 15rpx 0 15rpx 20rpx;
	}
	.billTime {
		margin: 15rpx 0 15rpx 0;
		color: #989898;
	}
	.billNumber {
		margin: 50rpx 15rpx 0 0;
		color: red;
		// font-weight: lighter;
	}
}
.billList {
	background-color: #e3e3e3;
	height: 100vh;
	display: block;
	// margin-top: 250rpx;
	> image {
		width: 100%;
		margin: auto;
	}
}
.billText {
	margin: auto;
	text-align: center;
	line-height: 50rpx;
	height: 50rpx;
	color: #989898;
}
</style>
